<template>
  <div style="text-align: left">
    <el-dialog
      title="编辑信息"
      :visible.sync="dialogFormVisible"
      @close="clearData"
      width="30%"
      center>
      <el-form :model="confirmForm" class="confirm-container" label-position="left"
               label-width="80px">
        <el-form-item prop="type" label="通告类型">
          <el-select v-model="confirmForm.type" placeholder="请选择" clearable>
            <el-option
              v-for="item in optionsType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="title" label="通告标题">
          <el-input type="text" v-model="confirmForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="bz" label="通告内容">
          <el-input type="textarea"
                    :autosize="{ minRows: 2, maxRows: 5}"
                    placeholder="通告内容(不超过200个字)"
                    v-model="confirmForm.bz"></el-input>
        </el-form-item>
        <el-form-item prop="fbsj" label="发布时间">
          <el-date-picker
            v-model="confirmForm.fbsj"
            type="datetime"
            value-format="yyyy-MM-dd hh:mm:ss"
            placeholder="选择日期时间"
            default-time="12:00:00">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="enabled" label="通告状态">
          <el-select v-model="confirmForm.enabled" placeholder="请选择" clearable>
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="to" label="发布对象">
          <el-select v-model="confirmForm.discordTo.id" placeholder="请选择" clearable>
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="" @click="confirm">提交
        </el-button>
        <el-button @click="dialogFormVisible = false" style="">取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'NotifyEdit',
  data () {
    return {
      dialogFormVisible: false,
      optionsType: [{
        value: 400,
        label: '警告信息'
      }, {
        value: 300,
        label: '普通信息'
      }],
      options1: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      options2: [{
        value: 1,
        label: '学生'
      }, {
        value: 2,
        label: '教师'
      }],
      confirmForm: {
        id: '',
        acc: '',
        type: '',
        title: '',
        bz: '',
        fbsj: '',
        enabled: '',
        discordTo: {
          id: '',
          name: ''
        }
      }
    }
  },
  methods: {
    confirm () {
      this.$axios.post('/admin/notify_manager/table/editInfo', {
        id: this.confirmForm.id,
        acc: this.confirmForm.acc,
        type: this.confirmForm.type,
        title: this.confirmForm.title,
        bz: this.confirmForm.bz,
        fbsj: this.confirmForm.fbsj,
        enabled: this.confirmForm.enabled,
        discord_to: this.confirmForm.discord_to
      }).then(resp => {
        this.dialogFormVisible = false
      }).catch(failResponse => {
        alert('服务器响应请求失败！')
      })
    },
    clearData () {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style scoped>
.confirm-container {
  background-clip: padding-box;
  margin: 5px 5px;
  width: 350px;
  padding: 15px 15px 15px 15px;
  background: #fff;
}
</style>
